<template>
  <div class="container">
    <button @click="start">随机一词</button>
    <div>{{ currentWord }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const words = [
  '小鸟',
  '大树',
  '红花',
  '白云',
  '明星',
  '美丽',
  '快乐',
  '高山',
  '深海',
  '远方',
  '快跑',
  '大笑',
  '小狗',
  '美食',
  '悲伤',
  '忧虑',
  '美丽',
  '多云',
  '冷水',
  '黑夜',
]
const currentWord = ref(words[0])
let intervalId = null

const start = () => {
  clearInterval(intervalId)
  intervalId = setInterval(() => {
    const randomIndex = Math.floor(Math.random() * words.length)
    currentWord.value = words[randomIndex]
  }, 50)

  setTimeout(() => {
    clearInterval(intervalId)
  }, 2000)
}

onMounted(() => {
  // 组件挂载时初始化单词
  currentWord.value = words[0]
})

onUnmounted(() => {
  clearInterval(intervalId)
})
</script>

<style scoped>
.container button {
  margin-bottom: 24px;
  font-size: 24px;
}
</style>
